<template>
  <div>
    <!-- 导航栏 -->
    <div class="navbar-wrap">
      <div class="Navbarold">
        <nav>
          <div class="navbar-logo">
            <a class="navbar-back" href="javascript:history.back();"></a>
          </div>
          <div class="navbar-title">猫眼电影</div>
          <div class="navbar-button"></div>
        </nav>
      </div>
    </div>
<!-- 搜索框 -->
    <div class="search-wrapper" data-search-type="movie">
      <div class="search-header">
        <div class="input-wrapper">
          <img
            class="img noneBg search-icon"
            alt=""
            src="//s0.meituan.net/bs/myfe/canary/file/apollo/images/search.png"/>
            <input
            
             @keyup.enter="addInput"
            type="text"
            class="search-input"
            placeholder="搜电影、搜影院"
            v-model="val"
           
          />
          <div class="delete" v-if="!valtime" @click="deLete">
          <img class="del-input" src="//s0.meituan.net/bs/?f=myfe/canary:/static/deploy/images/close.png" alt="">
        </div>
      </div>
        <div class="cancel" @click="$router.push({ path: '/' })">取消</div>
</div>
  </div>
 <!-- 渲染搜索的关键字电影 -->
    <div class="moviel" v-show="moviel.length > 0">
      <h3>电影/电视剧/综艺</h3>
      <SearchMovie v-for="item in moviel" :key="item.id" :item="item" />
      <div class="more" @click="allbutton = true">
        查看全部{{ moviels.length }}部影视剧
      </div>
      <p class="p"></p>
    </div>

     <AllMovie
      v-show="allbutton"
      :moviels="moviels"
      @button-fan="allbutton = false"
    />

     <!-- 渲染搜索的关键字影院 -->
    <div class="cinemas" v-show="yingyuan.length > 0">
      <h3>影院</h3>
      <CineMa v-for="item in yingyuan" :key="item.id" :item="item" />
      <div class="more" @click="allyingyuan = true">
        查看全部{{ yingyuans.length }}家电影院
      </div>
      <p class="p"></p>
    </div>

    <AllCinema
      v-show="allyingyuan"
      @button-hui="allyingyuan = false"
      :yingyuans="yingyuans"
    />

    <!-- 记录搜索 -->
    <div class="historys" v-show="val == ''">
      <div class="history" v-for="(i, n) in history" :key="n">
        <div class="icon-l"></div>
        <div class="text" @click="tosearch(i)">{{ i }}</div>
        <div class="icon-r" @click="deLda(n)"></div>
      </div>
    </div>
  </div>
      <!-- <div class="search-history">
        <div class="history-item" data-index="0">
          <span class="history-icon"></span
          ><span class="word one-line">门</span>
          <div class="del-word"></div>
        </div>
      </div> -->



    

   
    
</template>

<script>
// 引入部分电影数据
import SearchMovie from "@/components/SearchMovie.vue";
// 引入全部电影数据
import AllMovie from "@/components/AllMovie.vue";
// 引入全部电影数据
import CineMa from "@/components/CineMa.vue";
// 引入全部影院数据
import AllCinema from "@/components/AllCinema.vue";

export default {
   components: {
     SearchMovie,
    AllMovie,
    CineMa,
    AllCinema,
  },
  data:function(){
    return {
     cityname:[],
       val: "", //搜索框的值
      moviel: [], //搜索的电影数据
      moviels: [], //全部电影数据
      yingyuan: [], //搜索的影院数据
      yingyuans: [], //全部影院数据
      allbutton: false, //全部电影显示隐藏
      allyingyuan: false, //全部影院显示隐藏
      valtime: true, //删除显示隐藏
      history: JSON.parse(window.localStorage.getItem("history")) || [], //记录搜索记录
    };  },

   methods: {
      getHistory() {
      //获取城市记录
      let re = localStorage.getItem("selecthistory");
      this.cityname = JSON.parse(re)[0];
    },

 created: function () {
    this.getHistory();
    
  },
    // 删除输入框内容
    deLete: function () {
      this.val = "";
    },
    // 添加到记录数组
    addInput: function () {
      if (this.val != "") {
        this.history.push(this.val);
      }
    },
    // 删除指定记录数组中的内容
    deLda: function (n) {
      this.history.splice(n, 1);
      console.log(n);
    },
    // 点击记录内容继续搜索
    tosearch: function (i) {
      console.log(i);
      this.val = i;
    },
  },
  watch: {
    val: function (key) {
      // 关键字电影
      this.axios
        .get(
          "https://apis.netstart.cn/maoyan/search/movies?keyword=" + key +"&c=" + this.cityname.id + ""
        )
        .then((res) => {
          if (key != "") {
            this.valtime = false;
          } else {
            this.valtime = true;
          }
          this.moviel = res.data.slice(0, 3);
          this.moviels = res.data;

          console.log(res, this.moviel);
        });

      //关键字影院
      this.axios
        .get(
          "https://apis.netstart.cn/maoyan/search/cinemas?keyword=" + key +"&ci=" +this.cityname.id +""
        )
        .then((res) => {
          this.yingyuan = res.data.slice(0, 3);
          this.yingyuans = res.data;
          console.log(res, this.yingyuan);
        });
    },
    // 本地保存搜索记录
    history: function (n) {
      window.localStorage.setItem("history", JSON.stringify(n));
    },
  },
};
</script>

<style lang="less">
.Navbarold {
  height: 50px;
  background-color: #e54847 !important;
  display: -webkit-box;
  height: 38px;
  overflow: hidden;
  position: relative;
  padding: 6px;
  box-sizing: content-box;
  nav {
    width: 100%;
    display: -webkit-box;
    .navbar-logo {
      width: 100px;
      background-size: 37%;
      .navbar-back {
        width: 36px;
        height: 36px;
        display: block;
        z-index: 999;
      }
      .navbar-back:after {
        content: "";
        top: 16px;
        left: 12px;
        width: 13px;
        height: 13px;
        position: absolute;
        border: 2px solid #fff;
        border-width: 0 0 2px 2px;
        transform: rotate(45deg);
      }
    }

    .navbar-title {
      -webkit-box-flex: 1;
      color: #fff;
      font-size: 18px;
      text-align: center;
      line-height: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
    }
    .navbar-button {
      position: relative;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}

.search-wrapper {
    background-color: #f5f5f5;
    
    .search-header {
    display: flex;
    align-items: center;
    padding: 8px 0 8px 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    z-index: 1;
    .input-wrapper {
    padding: 0 10px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    background-color: #fff;
    flex-grow: 1;
    .search-icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    float: left;
    position: relative;
    top: 6px;
}
.search-input {
    flex: 1;
    border: none;
    font-size: 13px;
    color: #333;
    line-height: 20px;
    padding: 4px 0;
    width: calc(100% - 40px);
}
.delete{
      width: 15px;
    height: 15px;
    position: absolute;
    top: 9px;
    right: 67px;

}
.del-input {
    width: 15px;
    height: 15px;
    float: right;
    position: relative;
    top: 6px;
}
}
.cancel {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 18px;
    color: #f03d37;
}
}
}

 .moviel {
    // padding-left: 10px;
    h3 {
      padding: 9px 12px;
      font-weight: 400;
      font-size: 15px;
      color: #999999;
      border-bottom: 1px solid #e6e6e6;
    }
    .more {
      font-size: 15px;
      color: #ef4238;
      line-height: 44px;
      text-align: center;
      border-top: 1px solid #e6e6e6;
    }
  }

  .cinemas {
    h3 {
      padding: 9px 12px;
      font-weight: 400;
      font-size: 15px;
      color: #999999;
      border-bottom: 1px solid #e6e6e6;
    }
    .more {
      font-size: 15px;
      color: #ef4238;
      line-height: 44px;
      text-align: center;
      border-top: 1px solid #e6e6e6;
    }
  }

  .historys {
    .history {
      margin-left: 15px;
      display: flex;
      align-items: center;
      height: 44px;
      border-bottom: 1px solid #e5e5e5;
      .icon-l {
        width: 15px;
        height: 15px;
        margin-right: 10px;
        background: url(https://s0.meituan.net/bs/myfe/canary/file/apollo/images/search/img/base64/recent-search.png)
          no-repeat;
        background-size: contain;
      }
      .text {
        width: 299px;
        color: #333;
      }
      .icon-r {
        margin-left: 12px;
        background-image: url(//s0.meituan.net/bs/myfe/canary/file/apollo/images/search/img/base64/delete.png);
        background-repeat: no-repeat;
        // background-position: 0.3rem;
        background-size: contain;
        align-self: center;
        padding: 0.08rem 0.3rem;
        width: 10px;
        height: 10px;
      }
    }
  }
</style>